<template>
  <!-- <div class="reportbox"> -->
  <!-- ----------------------------------------------
                        路况信息
    ----------------------------------------------- -->
  <div class="audievevt">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- <span>报告路况</span> -->
      <span @click="dialogTableVisible = true">路况信息</span>
      <el-dialog title="路况信息" :visible.sync="dialogTableVisible">
        <el-input
          placeholder="请输入内容"
          size="small"
          prefix-icon="el-icon-search"
        ></el-input>
        <el-table class="audittable" :data="pending" border>
          <el-table-column
            property="user_name"
            label="用户名"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            property="event_type"
            label="事件类型"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            property="event_addr"
            label="事件地址"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            property="event_mark"
            label="附近建筑"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            property="event_time"
            label="发生时间"
            width="110"
            align="center"
          ></el-table-column>
          <el-table-column
            property="event_describe"
            label="事件描述"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            property="event_status"
            prop="event_status"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.event_status === 0 ? false : true">
                已审核
              </span>
              <el-button
                size="small"
                type="success"
                class="auditbutton"
                v-if="scope.row.event_status === 0 ? true : false"
                @click="pass(scope.row.event_id)"
              >
                通过
              </el-button>
              <el-button
                size="small"
                type="warning"
                class="auditbutton"
                v-show="scope.row.event_status === 0 ? true : false"
                @click="ignore(scope.row.event_id)"
              >
                忽略
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 5, 8, 10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          >>
        </el-pagination>
      </el-dialog>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: '',
      pending: [],
      dialogTableVisible: false,
      page: 1, // 当前的页码数
      size: 5, // 每页显示记录数
      total: 0, // 记录总数
    };
  },
  created() {
    this.getAuditEvent();
  },
  methods: {
    getAuditEvent() {
      this.$http
        .get('/auditEvent', {
          params: { page: this.page, size: this.size },
        })
        .then((res) => {
          // 1. 更新total
          this.total = res.result.total;
          // 2. 更新blogArticle数组
          this.pending = res.result.data;
        });
    },
    handleSizeChange(val) {
      // 改变每页显示记录数
      this.size = val;
      this.getAuditEvent();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getAuditEvent();
    },
    pass(id) {
      this.event_status = 2;
      this.$http
        .put('/auditEvent/' + id, { event_status: this.event_status })
        .then((res) => {
          console.log('id', res);
        });
      this.getAuditEvent();
    },
    ignore(id) {
      this.event_status = 1;
      this.$http
        .put('/auditEvent/' + id, { event_status: this.event_status })
        .then((res) => {
          console.log('id', res);
        });
      this.getAuditEvent();
    },
  },
};
</script>
<style scoped>
/* .reportbox {
  position: absolute;
  display: flex;
  top: 15px;
  right: 3px;
  width: 400px;
  height: 45px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
} */
/* -----------------------
        路况信息
------------------------ */
.audievevt {
  position: absolute;
  top: 18px;
  left: 1130px;
  width: 90px;
  height: 35px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.audievevt:hover {
  background-color: #dbdbdb;
}
.audievevt span {
  position: absolute;
  top: 5px;
  left: 15px;
  font-weight: 700;
  color: #7c8196;
}
.audievevt span:hover {
  color: white;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 0px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  padding-right: 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 80px;
  margin-top: 0px;
}
.el-input__inner {
  width: 2000px;
  border-radius: 50px;
  padding: 0 48px;
  font-size: 17px;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
}
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  margin-top: 0px;
  background: #fff;
  border-radius: 16px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  z-index: 10000;
}
</style>
